<template>
  <view class="course-list">
    <!-- 任务列表 -->
    <view class="filter-section">
      <u-dropdown>
        <u-dropdown-item v-model="categoryId" :title="categoryTit" :options="courseTypeList"  @change="handleChange1"></u-dropdown-item>
        <u-dropdown-item v-model="statusValue" :title="statusValueTit" :options="statuses" @change="handleChange"></u-dropdown-item>
      </u-dropdown>
    </view>
 
    <view class="course-items" v-if="showCourseList">
      <view class="course-item" v-for="course in tasksList" :key="course.id" @click="navigateToCourse(course)">
        <image class="course-image" :src="course.cover" mode="aspectFill" />
        <view class="course-content">
          <view class="course-header">
            <view class="course-title">{{ course.name }}</view>
            <view :class="['course-status', 'status-tag'+course.status]">
              {{ getStatusText(course.status) }}
            </view>
          </view>
          <view class="course-description">{{ course.refer }}</view>
          <view class="course-type">
            <image class="img" :src="IMG_URL2 + 'peop/folder.svg'" mode="aspectFill" />
            <view class="view">{{ course.categoryName }}</view>
          </view>
          <view class="course-assignment">
            <view class="label">分配员工：</view>
            <view class="value">{{ course.staffName }}</view>
          </view>
        </view>
        <view style="margin-top:60rpx;">
          <image class="chevronright" :src="IMG_URL2+'common/chevron-right.svg'"></image>
        </view>
      </view>
      <up-divider v-if="tasksList.length>pageSize"  :text="loadStatus"></up-divider>
    </view>
    <view v-if="!showCourseList" class="flex justify-center items-center bg-white">
      <Empty :emptyInfo="emptyInfo" />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { studyApi } from "@/api";
import { IMG_URL2 } from "@/config";
import Empty from "@/components/empty.vue";
const categoryId = ref(-1)
const statusValue = ref(-1)
let categoryTit =ref('全部分类')
let statusValueTit = ref('全部状态')

let showCourseList=ref(true)

const EmptyImage = ref(IMG_URL2 + "empty/normal.png");
const emptyInfo = ref({
  image: EmptyImage,
  width: 300,
  height: 300,
  tip: "暂无数据~"
});


const courseTypeList = ref([])
let currentPage = ref(1)
let pageSize = ref(15)
let totalCount = ref(0)
let loadStatus =ref('正在加载中')
const statuses = ref([
  { label: '全部状态', value: -1 },
  { label: '未完成', value: 0 },
  { label: '进行中', value: 1 },
  { label: '已学习', value: 2 }
])
// 0未完成 1进行中 2已学习
const getStatusText = (status) => {
  const statusMap = {
    0: '未完成',
    1: '进行中',
    2: '已学习'
  }
  return statusMap[status]
}

const tasksList = ref([])

const navigateToCourse = (course) => {
  uni.navigateTo({
    url: `/pages/distributivelearning/tasksdetails?courseId=${course.courseId}&currentPage=${currentPage.value}`,
  })
}
const getOurseType = () => {
  // 返回 Promise
  return studyApi.STUDYGETALLCATEGORY().then((res) => {
    if (res.code == 200) {
      console.log('res', res)
      courseTypeList.value = res.result.map((item) => {
        return {
          ...item,
          label: item.name,
          value: item.courseCategoryId
        }
      })
      courseTypeList.value.unshift({ label: '全部分类', value: -1 })
      categoryId.value = courseTypeList.value[0].value
      return res // 返回结果，让 Promise 链可以继续
    } else {
      uni.showToast({
        title: res.errMsg,
        icon: "none",
        duration: 1000
      });
      return Promise.reject(res.errMsg) // 错误情况返回 rejected promise
    }
  });
}
const getData = (type) => {
  let params={
    currentPage:currentPage.value,
    isTaskCheck:true,
    pageSize:pageSize.value,
  }

  if(categoryId.value!=-1){
    params.categoryId = categoryId.value
  }
  if(statusValue.value!=-1){
    params.status = statusValue.value
  }
  return studyApi.STUDYGETCOURSEORTASKLIST(params).then((res) => {
    if (res.code == 200) {
      if(type == 1) {
        tasksList.value = res.result.data
        totalCount.value = res.totalCount
        if(res.result.data.length == 0){
          showCourseList.value = false
        }
      } else {
        tasksList.value = tasksList.value.concat(res.result.data)
      }
    } else {
      uni.showToast({ title: res.errMsg, icon: "none" });
    }
  })
}
const handleChange = (value) => {
  categoryId.value = value
  statusValueTit.value = statuses.value.find(item => item.value === value).label
  console.log('statusValue',statusValue.value)
  currentPage.value=1
  showCourseList.value = true
  getData(1)
}


const handleChange1 = (value) => {
  statusValue.value = value
  categoryTit.value = courseTypeList.value.find(item => item.value === value).label
  console.log('statusValue',statusValue.value)
  currentPage.value=1
  showCourseList.value = true
  getData(1)
}
// 触底加载
onReachBottom(() => {
  console.log("触底加载");
  if (tasksList.value.length >= totalCount.value) {
    loadStatus.value = "没有更多数据了";
    return
  }
  loadStatus.value = "正在加载中";
  currentPage.value++
  getData(2);
});
// 下拉刷新
onPullDownRefresh(() => {
  console.log("下拉刷新");
  // 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
  loadStatus.value = "正在加载中";
  tasksList.value = [];
  getData(1)
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 300);
});
onShow(async () => {
  getOurseType()
  getData(1)
});

</script>

<style lang="scss" scoped>
.course-list {
  min-height: 100vh;
  background-color: #f5f5f5;

  .filter-section {
    background-color: #fff;
    border-bottom: 2rpx solid #eee;
  }

  .course-items {
    padding: 20rpx;
    box-sizing: border-box;
    .course-item {
      display: flex;
      align-items: center;
      background-color: #fff;
      padding: 20rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      border-radius: 12rpx;
      .chevronright {
        width: 16px;
        height: 16px;
      }
      .course-image {
        width: 160rpx;
        height: 160rpx;
        background-color: #f0f0f0;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }

      .course-content {
        flex: 1;
        margin-right: 20rpx;

        .course-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10rpx;

          .course-title {
            font-size: 28rpx;
            color: rgba(0, 0, 0, 0.9);
            font-weight: bold;
          }

          .course-status {
            font-size: 20rpx;
            padding: 4rpx 12rpx;
            box-sizing: border-box;
            border-radius: 4rpx;
          }
          .status-tag0{
            color: #c4996c;
          }
          .status-tag1{
            color: #c4996c;
          }
          .status-tag2{
            color: #52c41a;
          }
        }

        .course-description {
          font-size: 24rpx;
          color: rgba(0, 0, 0, 0.6);
          margin-bottom: 16rpx;
        }

        .course-type {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;
          .img {
            width: 28rpx;
            height: 28rpx;
          }
          .view {
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.6);
            margin-left: 8rpx;
          }
        }

        .course-assignment {
          font-size: 24rpx;
          display: flex;
          align-items: center;
          .label {
            font-size: 24rpx;
            color: rgba(214, 142, 68, 1);
          }

          .value {
            font-size: 24rpx;
            color: rgba(214, 142, 68, 1);
          }
        }
      }
    }
  }
}
</style>